<template>
	<div class="">
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left">
				<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="header_center">
				<span class="baiColor">我的辅导店铺</span>
			</div>
		</div>
		<div class="center" style="padding-top: 47px;">
			<div class="title">
				<div class="Tleft" @click="onClick_show('true')" 
					:class="isActive =='true' ? 'active' : ''">
					<span class="fudao">直管辅导（{{zhiguans.length}}）</span>
				</div>
				<div class="Tright" @click="onClick_show('false')" 
					:class="isActive == 'false' ? 'actives' : ''">
					<span class="dianpu">辅导店铺（{{stores.length}}）</span>
				</div>
			</div>
			 
			<!--直管辅导-->
			<div class="div1" v-if="show1 == 'true'">
				<div class="content" v-if="holderlenthZ > 0">
					<div class="div3" v-for="(zhiguan,index) in zhiguans">
						<img :src="zhiguan.u_img" />
						<div class="two">
							<div class="left">
								<p>{{zhiguan.u_name}}
									<i v-for="stage in Number(zhiguan.u_level)" class="iconfont">&#xe6d5;</i></p>
								<p>服务中心编号：{{zhiguan.u_invite}}</p>
							</div>
							<div class="right" @click="exchange(zhiguan.u_id)">
								<span>与他交谈</span>
							</div>
						</div>
					</div>
				</div>
				
				<div v-if="holderlenthZ <= 0">
					<img class="noneimg"  src="../assets/fuwucenter.png"/>
				</div>
			</div>
			
			<!--辅导店铺-->
			<div class="div1" v-if="show1 == 'false'">
				<div class="content" v-if ="holderlenthF > 0">
					<div class="div3" v-for="(store,index) in stores">
						<img :src="store.u_img" />
						<div class="two">
							<div class="left">
								<p>{{store.u_name}}
									<i v-for="stage in Number(store.u_level)" class="iconfont">&#xe6d5;</i></p>
								<p>服务中心编号：{{store.u_invite}}</p>
							</div>
							<div class="right" @click="exchange(store.u_id,index)">
								<span>与他交谈</span>
							</div>
						</div>
					</div>
				</div>
				<div v-if ="holderlenthF <= 0">
					<img class="noneimg"  src="../assets/fuwucenter.png"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				holderlenthZ:"",	//如果直管辅导没有内容
				holderlenthF:"",	//如果辅导店铺没有内容
				
				isActive: 'true',
				show1: 'true',
				zhiguans:[],	//直管辅导
				stores:[],	//辅导店铺
			}
		},
		components: {},
		//分别获取直管辅导和辅导店铺
		mounted:function(){
			var params = new URLSearchParams();
			var info = window.localStorage.data;
			this.$axios({
				url:'One/My/myTutorship',
				method:"GET",
				params:{
					token:info
				}
			}).then((res) => {
				var datas= res.data.data;
				if(res.data.status == 1){
					//辅导店铺
						this.stores = res.data.data.down;
						this.holderlenthF = datas.down.length;
					//直管辅导
						this.zhiguans = res.data.data.up;
						this.holderlenthZ = datas.up.length;
				}else{
					alert("数据获取失败")
				}
				
			}).catch((err) => {
				console.log(err)
			})
		},
		methods: {
			//切换导航
			onClick_show($true) {
				this.isActive = $true;
				this.show1 = $true;
			},
//			点击与我交谈进入聊天页面
			exchange:function(id){
				let _this = this;
				var info = window.localStorage.data;
				this.$axios({
				   url:"One/Social/chatContent",
					method:"get",
					params:{
						token:info,
						type:1,
						id:id,
					}
				 }).then((res)=>{
				  	if(res.data.status == 1){
				  		this.$router.push("wchat/"+id)
				  	}else{
				  		alert("信息获取失败")
				  	}
				}).catch(function(err){
					console.log(err)		
				})
			}
		}
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	@import url("../css/iFuDao.css");
	.center {
		width: 95%;
		margin: 0 auto;
	}
	.noneimg{
		display:block;
		width: 200px;
		height: 200px;
		margin: auto; 
		padding-top:20px;
	}
</style>